<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${initParam.root }css/table.css">
<style type="text/css">
	#left{
		float: left;
	}
	#right{
		margin-left: 10px;
		border-left: 1px solid silver;
		float: left;
	}
</style>
<script>
	$(function(){
		$.ajax({
			type:"post",
			url:"${initParam.root}messenger/auth_checkbox.do",
			data:"checked=&unchecked=",
			dataType:"json",
			success:function(jsonData){
				var receiversTemp="";
				$.each(jsonData,function(index,value){
					receiversTemp+=value+",";
					$.each($(":input[name=friend]"),function(index2,value2){
						if($(value2).val()==value){
							$(value2).prop("checked",true);
						}
					});
				});
				var receivers=receiversTemp.substring(0,receiversTemp.length-1);
				$(":input[name=receiver]").val(receivers);
			}
		}); // ajax
		
		$(":checkbox[name=allCheck]").change(function(){
			var allFlag=$(this).prop("checked");
			$(":checkbox[name=friend]").prop("checked",allFlag);
			$(":input[name=friend]").change();
		}); // change
		$(":input[name=friend]").change(function(){
			var checkedTemp="";
			var uncheckedTemp="";
			$.each($(":input[name=friend]"),function(index,value){
				if($(value).prop("checked")==true){
					checkedTemp+=$(value).val()+",";
				}else{
					uncheckedTemp+=$(value).val()+",";
				}
			});
			var checked=checkedTemp.substring(0,checkedTemp.length-1);
			var unchecked=uncheckedTemp.substring(0,uncheckedTemp.length-1);
			
			$.ajax({
				type:"post",
				url:"${initParam.root}messenger/auth_checkbox.do",
				data:"checked="+checked+"&unchecked="+unchecked,
				dataType:"json",
				success:function(jsonData){
					var receiversTemp="";
					$.each(jsonData,function(index,value){
						//alert(value);
						receiversTemp+=value+",";
						$.each($(":input[name=friend]"),function(index2,value2){
							if(($(value2).val()==value)){
								$(value2).prop("checked",true);
							}
						});
					});
					var receivers=receiversTemp.substring(0,receiversTemp.length-1);
					$(":input[name=receiver]").val(receivers);
				}
			}); // ajax
		}); // check change
		
		$("#sendMessageBtn").click(function(){
			$("#sendMessageForm").submit();
		});
		
		$("#sendMessageForm").submit(function(){
			var receiver=$(":input[name=receiver]").val();
			var content=$(":input[name=content]").val();
			if(receiver==""){
				alert("받는사람을 선택하세요!");
				return false;
			}
			if(content==""){
				alert("내용을 입력하세요!");
				$(":input[name=content]").focus();
				return false;
			}
		});
	});
</script>
</head>
<body>
<div id="left">
	<p>
		<c:set var="pb" value="${requestScope.map.lvo.pagingBean}"></c:set>
		<c:if test="${pb.previousPageGroup}">
			<a href="${initParam.root }messenger/auth_messengerPopup.do?tab=0&friendListPage=${pb.startPageOfPageGroup-1}">◀</a>	
		</c:if>
		<c:forEach var="i" begin="${pb.startPageOfPageGroup}" end="${pb.endPageOfPageGroup}">
		<c:choose>
			<c:when test="${pb.nowPage!=i }">
				<a href="${initParam.root }messenger/auth_messengerPopup.do?tab=0&friendListPage=${i}">${i}</a> 
			</c:when>
			<c:otherwise>
				<font style="color: red; font-size: 10.5pt;">${i}</font>
			</c:otherwise>
		</c:choose>
		</c:forEach>	 
		<c:if test="${pb.nextPageGroup}">
			<a href="${initParam.root }messenger/auth_messengerPopup.do?tab=0&friendListPage=${pb.endPageOfPageGroup+1}">▶</a>
		</c:if>
	</p>
	<table>
		<thead>
			<tr>
				<th><input type="checkbox" name="allCheck"></th>
				<th>ID</th>
				<th>NAME</th>
				<th>ADDRESS</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${requestScope.map.lvo.list}" var="list">
					<tr>
						<td><input type="checkbox" name="friend" value="${list.id }"></td>
						<td>${list.id }</td>
						<td>${list.name }</td>
						<td>${list.address }</td>
					</tr>
			</c:forEach>
		</tbody>
		<tfoot>
			<tr>
				<c:choose>
					<c:when test="${requestScope.map.flag=='noFriend' }">
						<td colspan="4" align="right">친구가 없습니다.</td>
					</c:when>
				</c:choose>
			</tr>
		</tfoot>
	</table>
</div>
<div id="right">
	<form id="sendMessageForm" method="post" action="${initParam.root}messenger/auth_sendMessage.do" enctype="multipart/form-data">
		<table>
			<tr>
				<td align="right">receiver</td><td><input type="text" name="receiver" placeholder="receivers" readonly="readonly"></td>
			</tr>
			<tr>
				<td align="right" valign="top">content</td>
				<td><textarea rows="10" cols="20" name="content" placeholder="content" style="resize: none;"></textarea></td>
			</tr>
			<tr>
				<td align="right">file</td><td align="right"><input type="file" name="file[0]"><br><input type="file" name="file[1]"></td>
			</tr>
			<tr>
				<td></td><td align="left"><input type="button" value="쪽지보내기" id="sendMessageBtn"></td>
			</tr>
		</table>
	</form>
</div>
</body>
</html>